<template>
  <el-container>
    <el-header>
      <div class="between-space">
        <span>时政热点后台管理系统</span>
        <div class="info-box">
          <el-avatar :src="userInfo.avatar"></el-avatar>
          <el-dropdown>
            <p class="el-dropdown-link">
              {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
            </p>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user">
                <router-link to="/admin/usercenter">
                  个人中心
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-refresh-left" @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="205px">
        <el-menu
            :default-active="this.$store.state.menus.editableTabsValue"
            class="aside-bar"
            background-color="#FFFFFF"
            text-color="#808991"
            active-text-color="#E64B1A"
            :unique-opened="true"
        >

          <router-link to="/admin/index">
            <el-menu-item index="Index">
              <i class="el-icon-menu"></i>
              <span slot="title">主页</span>
            </el-menu-item>
          </router-link>

          <el-submenu v-for="item in this.menuList" :key="item.name" :index="item.name">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>

            <router-link :to="child.path" v-for="child in item.children" :key="child.name">
              <el-menu-item :index="child.name">
                <template slot="title">
                  <i :class="child.icon"></i>
                  <span slot="title">{{child.title}}</span>
                </template>
              </el-menu-item>
            </router-link>
          </el-submenu>

        </el-menu>
      </el-aside>
      <el-main>
        <Tabs></Tabs>
        <div style="margin: 0 15px;">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Tabs from "../components/Tabs";
export default {
  name: "Home",
  data() {
    return {
      userInfo: {
        id: '',
        username: '',
        avatar: ''
      },
      menuList: [
        {
          title: '系统配置',
          icon: 'el-icon-s-tools',
          name: '2',
          children: [
            {
              title: '用户菜单',
              icon: 'el-icon-user',
              name: 'User',
              path: '/admin/system/user'
            },
            {
              title: '文章菜单',
              icon: 'el-icon-reading',
              name: 'Article',
              path: '/admin/system/article'
            }
          ]
        },
        {
          title: '数据观星',
          icon: 'el-icon-data-board',
          name: '3',
          children: [
            {
              title: '标签数据',
              icon: 'el-icon-s-order',
              name: '3-2',
              path: '/admin/data/article'
            }
          ]
        }
      ]
    }
  },
  created() {
    this.getAdminUserInfo()
  },
  methods: {
    getAdminUserInfo() {
      this.$http.get('/userInfo').then(res => {
        this.userInfo = res.data.data
        this.$store.commit('log_userInfo', this.userInfo)
      })
    },
    logout() {
      this.$http.post('/logout').then(res => {
        localStorage.clear()
        this.$store.commit('resetState')
        this.$router.push('/login')
      })
    },
  },
  components: {
    Tabs
  }
}
</script>

<style lang="less" scoped>

.el-header span,p {
  color: white;
  margin: 0;
  padding: 0;
}

.el-container {
  margin: 0;
  padding: 0;
  height: 100%;
}

.el-header {
  background-color: #E64B1A;
  color: #333;
  line-height: 60px;
  font-size: large;
}

.el-aside {
  background-color: #F0F0F0;
  color: #333;
  line-height: 200px;
}

.aside-bar {
  height: 100%;
}

.el-main {
  background-color: #FFFFFF;
  color: #333;
  padding: 0;
}

.el-dropdown-link {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 80px;
}

.el-dropdown-link:hover {
  cursor: pointer;
}

.between-space {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  .el-dropdown-link {
    margin-left: 10px;
  }
}
</style>
